@extends('admin.common.main')
@section('css')
    <!--引入CSS-->
    <link rel="stylesheet" type="text/css" href="/webuploader/webuploader.css">
@endsection
@section('content')
    <body>
    <article class="page-container">
        <form action="{{route('admin.fang_owner.store')}}" method="post" class="form form-horizontal"
              id="form-member-add">
            @include('admin.common.error')

            @csrf
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>房东姓名：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="text" class="input-text" value="" placeholder="" id="name" name="name">
                </div>
            </div>

            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>性别：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="radio" class="radius" name="sex" value="1">男
                    <input type="radio" class="radius" name="sex" value="0">女
                </div>
            </div>

            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>年龄：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="number" class="input-text" value="" placeholder="" id="age" name="age">
                </div>
            </div>

            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>手机号：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="tel" class="input-text" value="" placeholder="" id="phone" name="phone">
                </div>
            </div>

            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>家庭地址：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="text" class="input-text" value="" placeholder="" id="address" name="address">
                </div>
            </div>

            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>身份证：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="text" class="input-text" value="" placeholder="" id="card" name="card">
                </div>
            </div>

            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>身份证照片：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <div class="formControls col-xs-5 col-sm-5">
                        <div id="picker">选择身份证正反面</div>
                    </div>
                    <div class="formControls col-xs-6 col-sm-7">
                        <input type="hidden" name="pic" id="pic"/>
                        <div id="imgList"></div>
                    </div>
                </div>
            </div>

            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>邮箱：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="email" class="input-text" value="" placeholder="@" id="email" name="email">
                </div>
            </div>



            <div class="row cl">
                <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
                    <input class="btn btn-primary radius" type="submit" value="&nbsp;&nbsp;提交&nbsp;&nbsp;">
                    <a href="javascript:;" onclick="history.go(-1)" class="c-primary btn btn-dark radius">&lt; 返回上一页</a>
                </div>
            </div>
        </form>
    </article>
    @endsection

    @section('js')
        <script type="text/javascript" src="/webuploader/webuploader.js"></script>
        <!-- 配置文件 -->
        <script type="text/javascript" src="/ueditor/ueditor.config.js"></script>
        <!-- 编辑器源码文件 -->
        <script type="text/javascript" src="/ueditor/ueditor.all.js"></script>

        <!-- 实例化编辑器 -->
        <script type="text/javascript">

            var uploader = WebUploader.create({

                // swf文件路径
                swf: '/webuploader/Uploader.swf',
                method: 'post',
                auto: true,
                chunked: true,
                formData: {
                    _token: "{{csrf_token()}}"
                },
                // 文件接收服务端。图片上传的接口
                server: "{{route('admin.fang_owner.oss_upfile')}}",

                // 选择文件的按钮。可选。
                // 内部根据当前运行是创建，可能是input元素，也可能是flash.
                pick: '#picker',

                // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
                resize: false,
            });

            uploader.on('uploadSuccess', function (pic, ret) {
                var imgPath = ret.data.pic
                var imgHtml = `  <div style="position: relative;width:100px;">
                <img src="${imgPath}" style="width:100px;" />
                <strong onclick="delPic(this,'${imgPath}')" style="position: absolute;right: 2px;top: 2px;color: white;font-size: 20px;">X<strong>
            </div>`

                $('#imgList').append(imgHtml);

                //把图片路径追加到隐藏域中，但是首先要获取原本隐藏域里面的值
                var picVal = $('#pic').val()
                var PicVal = picVal + "#" + imgPath;

                $('#pic').val(PicVal);
            });


            function delPic(ret, imgPath) {
                //要移除视图展示图片
                $(ret).parent().remove()
                //要去掉隐藏域相对应的值
                var picVal = $('#pic').val()
                //把要替换的字符串替换成空
                var res = picVal.replace(`#${imgPath}`, '')
                //最后重新赋值给隐藏域
                $('#pic').val(res)
                //要真正的删除图片资源
                $.ajax({
                    url: "{{route('admin.fang_owner.delfile')}}",
                    method: 'delete',
                    data: {
                        _token: "{{csrf_token()}}",
                        pic: imgPath
                    },
                    success: res => {
                        console.log(res)
                    }
                })
            }
        </script>
@endsection
